<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>鼓励金兑现</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="__INDEX__/store/css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="__INDEX__/store/css/style.css" />
		<link rel="stylesheet" href="__INDEX__/store/css/iconfont.css" />
		<link rel="stylesheet" href="__INDEX__/store/css/wallet.css" />
		<style>
			.eul {
				margin: 2px 0 0 2px;
			}
			
			.eul li {
				border: none;
				display: inline-block;
				background: #ffffff;
				width: 33%;
			}
			
			.eul .active {
				background-color: #E3E3E3;
			}
			
			.eli {
				border: 1px solid #FF7831;
				padding: 11px 15px;
				color: #FF7831;
				margin: 10px 10px;
				font-size: 17px;
				text-align: center;
				font-weight: 600;
			}
			
			.eli em {
				font-size: 13px;
				font-weight: normal;
			}
		</style>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" href="JavaScript:history.go(-1)"></a>
			<h1 class="mui-title">鼓励金兑现</h1>
		</header>
		<div class="mui-content yongj_content" style="background: #FFF3E1;">
				<div style="border-bottom: 1px solid #CCCCCC;background: #fff;width: 90%;height:120px;margin: 15px 5% 10px 5%;border-radius: 10px; ">
				<div style="float:left;padding-top:30px;text-align:center;width:49.5%;color: #9A6206;">
					<p>余额</p>
					<p style="padding-top: 15px;color: #FF7831;">￥<em id="yue">{$agent_info['balance']}</em></p>
				</div>
				<div style="float:left;width: 0.3%;margin-top:15px;height:70%;background-color: #C0C0C4;"></div>
				<div style="float:left;padding-top:30px;text-align:center;width:49.5%;color: #9A6206;">
					<p>鼓励金</p>
					<p  style="padding-top: 15px;color:#48c15c"><em id="store_score">{$agent_info['score']}</em></p>
				</div>
			</div>
			<div style="border-bottom: 1px solid #CCCCCC;height: 35px;line-height: 35px;">
				<p style="color:green;padding-left: 20px;">1000鼓励金兑换100元</p>
			</div>
			<div>
				<ul class="mui-table-view mui-grid-view mui-grid-9 eul">
					<li>
						<div data-value="100" class=" eli">100元<br/><em>1000鼓励金</em></div>
					</li>
					<li>
						<div data-value="200" class=" eli">200元<br/><em>2000鼓励金</em></div>
					</li>
					<li>
						<div data-value="500" class=" eli">500元<br/><em>5000鼓励金</em></div>
					</li>
					<li>
						<div data-value="1000" class=" eli">1000元<br/><em>10000鼓励金</em></div>
					</li>
					<li>
						<div data-value="2000" class=" eli">2000元<br/><em>20000鼓励金</em></div>
					</li>
					<li>
						<div data-value="5000" class=" eli">5000元<br/><em>50000鼓励金</em></div>
					</li>
				</ul>
			</div>
			<div class="wallet_btn" id='quren'>
				<lable style='color: #fff;'>确认</lable>
			</div>
		</div>
		<input type="hidden" id="value" />
	</body>

</html>
<script src="__INDEX__/store/js/mui.min.js"></script>
<script type="text/javascript" src="__INDEX__/store/js/jquery.min.js"></script>
<script type="text/javascript" src="__INDEX__/store/js/layer/layer.min.js"></script>

<script>
	$(".eli").click(function() {
		$(".eul").find(".active").removeClass("active");
		$(this).addClass("active");
		$("#value").val($(this).data("value"));
	})

	$("#quren").click(function() {
		var value = $("#value").val();
		if($("#value").val() == "") {
			layer.msg("请选择兑换金额");
			return;
		}

		$.ajax({
			type:'post',
			url: "{:url('agent/score_yue')}" ,
			data: {
				value: value
			},
			success: function(data) {
				if(data.code == 200) {
					layer.msg(data.msg,function(){
						location.reload();
					});

				} else {
					layer.msg(data.msg);
					console.log(data.msg);
				}
			}
		})
	})
</script>